<template>
    <div class="mall-index">
        <div class="feaceBox" v-show="isShowType">
            <div class="boxSize" @click="hizeBox()"></div>
            <div class="feace_ul">
                <div class="feace_title">更多分类</div>
                <div class="face_li_box">
                    <template  v-for="(item,index) in getSliderList" >
                        <div class="face_li box_flex" v-if="item.name != '婚纱摄影'" :key="index" @click="selectItem(item,index)" > <!-- 点选方法 -->                    
                            <div class="face_li_con" :class="category == item.name ? 'select_active':''">{{item.name}}</div>
                            <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/right_icon_active.png" v-if="category == item.category" class="face_li_img" alt="">
                            <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/right_icon.png" v-else class="face_li_img" alt="">
                        </div>
                    </template>
                </div>
                
            </div>
        </div>

        <Banner :banners="indexBanners" />
        <!-- <TabBox type="w6" :tabs="tabs" @openSlideMenu="openSlideMenu" /> -->
        <div class="tabbox">
            <div class="tabbox_item text-center" :class="[item.wd]"  @click="openSlideMenu(item)" v-for="(item, index) in tabs" :key="index">
                <img :src="item.png" class="tabbox_item_img" alt="" />
                <div class="tabbox_item_title">{{item.text}}</div>
            </div>
        </div>

        <!--     width: 785%;
    left: -465%; -->
        <div class="box_flex">
            <!-- 搜索 -->
            <van-search v-model="search" style="width: 82%;" placeholder="商品名/品牌/商品种类/关键字" />
            <!-- 筛选 -->
            <div class="select-wrap">
                <!-- <selectBoxNew @sort="onChangeSort" @range="onChangeRange" /> -->
                <span class="shop-category__filter-type" style="padding:10rpx 0rpx;" @click="showFilter = true">
                    <span class="icon">&#xe876;</span> 筛选
                </span>
            </div>
        </div>

        <!-- 筛选 -->
        <!-- <div class="select-wrap">
            <SelectBox @sort="onChangeSort" @range="onChangeRange" />
        </div> -->
        <!-- 排序 -->
        <SelectSort @sort="onChangeSort" @range="onChangeRange" />
        <div class="goods-box">
            <div v-if="list.length > 0" class="good clearfix">
                <ProductListItem v-for="(product, index) in list"
                    :key="index"
                    :cover="product.list_cover || product.cover"
                    :name="product.name"
                    :tag="product.tag"
                    :shop-name="product.shop_name"
                    :keywords="product.keywords"
                    :price="product.price"
                    :display-price="product.display_price"
                    :read-number="product.visitor || 0"
                    :share-number="product.share_number || 0"
                    @click="onClickProduct(product)">
                </ProductListItem>
            </div>
            <div v-else-if="!productList.req" class="mall-index__empty">
                暂无数据
            </div>
        </div>

        <BottomTab value="mall" />

        <!-- 过滤器 -->
        <div v-if="showFilter" class="popup-container filter-popup" @click="showFilter = false">
            <div class="popup popup--pos-right" @click.stop>
                <div class="filter-popup__title">价格区间</div>
                <div class="filter-popup__input-wrap">
                    <input type="number" v-model="tempFilter.min" placeholder="最低价" class="filter-popup__input">
                    <span class="filter-popup__line">&nbsp;——&nbsp;</span>
                    <input type="number" v-model="tempFilter.max" placeholder="最高价" class="filter-popup__input">
                </div>
                <!-- 搜索商品，一级分类 显示一级分类、二级分类(一级和二级需联动) 和规格 -->
                <template v-if="search != '' || category">
                    <template v-for="(item2,index2) in getTopAllCategory ">
                        <!-- 一级分类 -->
                        <template v-if="item2.field == 'first_category_id'">
                            <div class="filter-popup__title" :key="index2">{{item2.title}}</div>
                            <div class="filter-popup_params" :key="index2">
                                <template v-for="(row, rowIndex) in item2.data" >
                                    <div class="filter-popup_params_item" :key="rowIndex" :class="{'filter-popup__item--active': row.name === tempFilter.first_category_name}" @click="onClickfirst_category_id(row)">{{row.name}}</div>
                                </template>
                            </div>
                        </template>
                        <!-- 规格 -->
                        <template v-if="item2.field == 'category_id'">
                            <div class="filter-popup__title" :key="index2">{{item2.title}}</div>
                            <div class="filter-popup_params" :key="index2">
                                <template v-for="(row4, rowIndex4) in item2.data" >
                                    <template v-if="tempFilter.first_category_id == ''">
                                        <div class="filter-popup_params_item" :key="rowIndex4" :class="{'filter-popup__item--active': row4.name === tempFilter.SpecName}" @click="onClickCategory(row4)">{{row4.name}}</div>
                                    </template>
                                    <template v-else>
                                        <template v-if="row4.flag && tempFilter.first_category_id != ''">
                                            <div class="filter-popup_params_item" :key="rowIndex4" :class="{'filter-popup__item--active': row4.name === tempFilter.SpecName}" @click="onClickCategory(row4)">{{row4.name}}</div>
                                        </template>
                                        <!-- 不可选的 -->
                                        <template v-else>
                                            <div class="filter-popup_params_item" :key="rowIndex4" style="color:#999;background-color:#e0e0e0;" >{{row4.name}}</div>
                                        </template>
                                    </template>
                                    
                                </template>
                            </div>
                        </template>
                        <template v-if="item2.field == 'brand_id'">
                            <div class="filter-popup__title" :key="index2">{{item2.title}}</div>
                            <div class="filter-popup_params" :key="index2">
                                <template v-for="(row5, rowIndex5) in item2.data" >
                                    <div class="filter-popup_params_item" :key="rowIndex5" :class="{'filter-popup__item--active': row5.name === tempFilter.brand}" @click="onClickBrand(row5)">{{row5.name}}</div>
                                </template>
                            </div>
                        </template>
                        
                    </template>
                </template>
                <!-- 新品牌 -->
                <!-- <template v-if="category != '婚纱摄影'">
                    <div class="filter-popup__title">品牌</div>
                    <div class="filter-popup_params">
                        <template v-for="(item, itemIndex) in brand" >
                            <div class="filter-popup_params_item" :key="itemIndex" :class="{'filter-popup__item--active': item.name === tempFilter.brand}" @click="onClickBrand(item)">{{item.name}}</div>
                        </template>
                    </div>
                </template> -->
                <!-- 品牌 -->
                <!-- <template v-if="category != '婚纱摄影'">
                    <div class="filter-popup__title">品牌</div>
                    <div v-for="(row, rowIndex) in brand" :key="rowIndex" class="filter-popup__row">
                        <div class="filter-popup__item-wrap">
                            <div v-if="row[0]" class="filter-popup__item" :class="{'filter-popup__item--active': row[0].id === tempFilter.brand}" @click="onClickBrand(row[0])">{{row[0].name}}</div>
                        </div>
                        <div class="filter-popup__item-wrap">
                            <div v-if="row[1]" class="filter-popup__item" :class="{'filter-popup__item--active': row[1].id === tempFilter.brand}" @click="onClickBrand(row[1])">{{row[1].name}}</div>
                        </div>
                        <div class="filter-popup__item-wrap">
                            <div v-if="row[2]" class="filter-popup__item" :class="{'filter-popup__item--active': row[2].id === tempFilter.brand}" @click="onClickBrand(row[2])">{{row[2].name}}</div>
                        </div>
                    </div>
                </template> -->
                <!-- <template v-if="category != '婚纱摄影'">
                    <div v-for="(row, rowIndex) in categoryList" :key="rowIndex" class="filter-popup__row">
                        <div class="filter-popup__item-wrap">
                            <div v-if="row[0]" class="filter-popup__item" :class="{'filter-popup__item--active': row[0].id === tempFilter.category}" @click="onClickCategory(row[0])">{{row[0].name}}</div>
                        </div>
                        <div class="filter-popup__item-wrap">
                            <div v-if="row[1]" class="filter-popup__item" :class="{'filter-popup__item--active': row[1].id === tempFilter.category}" @click="onClickCategory(row[1])">{{row[1].name}}</div>
                        </div>
                        <div class="filter-popup__item-wrap">
                            <div v-if="row[2]" class="filter-popup__item" :class="{'filter-popup__item--active': row[2].id === tempFilter.category}" @click="onClickCategory(row[2])">{{row[2].name}}</div>
                        </div>
                    </div>
                </template>
                <template v-if="category != '婚纱摄影'">
                    <div class="filter-popup__title">品牌</div>
                    <div v-for="(row, rowIndex) in brand" :key="rowIndex" class="filter-popup__row">
                        <div class="filter-popup__item-wrap">
                            <div v-if="row[0]" class="filter-popup__item" :class="{'filter-popup__item--active': row[0].id === tempFilter.brand}" @click="onClickBrand(row[0])">{{row[0].name}}</div>
                        </div>
                        <div class="filter-popup__item-wrap">
                            <div v-if="row[1]" class="filter-popup__item" :class="{'filter-popup__item--active': row[1].id === tempFilter.brand}" @click="onClickBrand(row[1])">{{row[1].name}}</div>
                        </div>
                        <div class="filter-popup__item-wrap">
                            <div v-if="row[2]" class="filter-popup__item" :class="{'filter-popup__item--active': row[2].id === tempFilter.brand}" @click="onClickBrand(row[2])">{{row[2].name}}</div>
                        </div>
                    </div>
                </template> -->
                
                <div class="filter-popup__btn paddingBottom">
                    <div @click="onClickSelectReset" class="btn btn-mobile btn-normal btn-white-red red-border">重置</div>
                    <div @click="onChangeRange" class="btn btn-mobile btn-normal btn-red">确定</div>
                </div>
            </div>
        </div>


    </div>
</template>

<script lang="ts">
import {
    api,
} from '@/lib/api';
import store from '@/store';
import LineTitle from '@/components/common/lineTitle.vue';
import Banner from '@/components/common/banner.vue';
import TabBox from '@/components/common/tabBox.vue';

import ProductListItem from '@/features/product/listItem.vue';
import SelectBox from '@/features/shop/selectBox.vue';

import selectBoxNew from '@/features/shop/selectBoxNew.vue';
import SelectSort from '@/features/shop/selectSort.vue';

import BottomTab from '@/components/nav/bottomTab.vue';
import { Component, Vue, Watch } from 'vue-property-decorator';
import { Route } from 'vue-router';
import { ROUTE_NAME, stage } from '@/lib/constant';
import { WatchDelay } from '@/lib/utils';
import { stat } from 'fs';

Component.registerHooks([
    'beforeRouteEnter',
]);

// 新增
interface TabItem {
    text: string;
    label?: string;
    wd: string;
    bg: string;
    callback: any;
    textAlign?: string;
}

@Component({
    name: 'MallIndex',
    components: {
        LineTitle,
        Banner,
        TabBox,
        ProductListItem,
        SelectBox,
        BottomTab,

        selectBoxNew,
        SelectSort,
    },
})

export default class MallIndex extends Vue {
    
    public shopId: any = null;
    public title: any = '';
    public sortValue: any = '';
    public sortName: any = '';
    public search = '';
    // 分类
    public category = '';

    public isShowType =  false;

    /** 是否显示filter */
    public showFilter = false;
    // 筛选
    // public filter: {
    //     min: string;
    //     max: string;
    //     category: number;
    //     brand: number | null;
    // } = {
    //     /** 最低价格，单位: 分 */
    //     min: '',
    //     /** 最高价格，单位: 分 */
    //     max: '',
    //     category: -1,
    //     brand: null,
    // };
    public tempFilter: {
        min: string;
        max: string;
        first_category_id: string;
        first_category_name: string;
        SpecName: string;
        brand: string;
    } = {
        min: '',
        max: '',
        first_category_id: '',
        first_category_name: '',
        SpecName: '',
        brand: '',
    };

    // category_id  一级分类id
    public category_id: any = '';

    // 有一级分类是 通过id请求 一级分裂、二级分裂和品牌
    public get getTopAllCategory(){
        return store.state.good.topAllCategory;
    }
    
    public change(){
        this.isShowType = true;
    }
    public hizeBox(){
        this.isShowType = false;
        this.$emit('hizeBox',false)
    }
    // 左侧菜单栏选中
    public selectItem(_item,_index){
        this.category = _item.name;
        this.category_id = _item.id;
        this.getBrandList();
        this.tempFilter = {
            min: '',
            max: '',
            first_category_id: '',
            first_category_name:'',
            SpecName: '',
            brand: '',
        };
        
        this.getProductList(true,true);
        this.TopAllCategory();
        this.isShowType = false;
    }

    public get getSliderList(){
        return store.state.good.sliderList;
    }

    // 筛选分类
    public get getparentType(){
        return store.state.good.getparentType;
    }
    public get getTopCategoryid(){
        return store.state.good.getTopCategoryid;
    }

    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }
    /** banner */
    public get indexBanners() {
        return store.state.shop.indexBanners;
    }
    public get tabs() {
        const name = ROUTE_NAME.SHOP_CATEGORY
        // 商品分类
        return [
            {
                text: '全部商品',
                png:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/12@2x.png',
                // png:"https://192.168.110.199/images/12@2x.png",
                to: { name, query: { type: '全部商品', mode: 'bridal', category_id: '' } },
            },
            {
                png:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/3@2x.png',
                // png: 'https://192.168.110.199/images/3@2x.png',
                text: '结婚首饰',
                to: { name, query: { type: '结婚首饰', category_id: '37' } },
            },
            {
                text: '家用电器',
                png:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/2@2x.png',
                // png:"https://192.168.110.199/images/2@2x.png",
                to: { name, query: { type: '家用电器', mode: 'bridal', category_id: '38' } },
            },
            {
                png:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/4@2x.png',
                // png: 'https://192.168.110.199/images/4@2x.png',
                text: '美妆护肤',
                to: { name, query: { type: '美妆护肤', category_id: '39' } },
            },
            {
                png:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/5@2x.png',
                // png: 'https://192.168.110.199/images/5@2x.png',
                text: '礼服租售',
                to: { name, query: { type: '礼服租售', category_id: '40' } },
            },{
                png:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/7@2x.png',
                // png: 'https://192.168.110.199/images/7@2x.png',
                text: '床上用品',
                to: { name, query: { type: '床上用品', category_id: '41' } },
            },
            {
                png:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/8@2x.png',
                // png: 'https://192.168.110.199/images/8@2x.png',
                text: '家俱家私',
                to: { name, query: { type: '家俱家私', category_id: '42' } },
            },
            {
                png:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/9@2x.png',
                // png: 'https://192.168.110.199/images/9@2x.png',
                text: '时尚服饰',
                to: { name, query: { type: '时尚服饰', category_id: '43' } },
            },
            {
                png:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/6@2x.png',
                // png: 'https://192.168.110.199/images/6@2x.png',
                text: '婚宴喜酒',
                to: { name, query: { type: '婚宴喜酒', category_id: '44' } },
            },
            {
                png:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/11@2x.png',
                // png: 'https://192.168.110.199/images/11@2x.png',
                text: '更多分类',
                // to: { name, query: { type: '更多分类' } },
                openSlide:{}
            }
        ];
    }
    /** 区间是否有效 */
    public get isScreenValid() {
        if (this.tempFilter.min && this.tempFilter.max) {
            const low = Number(this.tempFilter.min);
            const high = Number(this.tempFilter.max);
            return !isNaN(low) && !isNaN(high) && (high > low);
        }
        return true;
    }
    /** 价格区间 */
    public get screen() {
        return this.isScreenValid
            ? {
                min: this.tempFilter.min ? Number(this.tempFilter.min) * 100 : '',
                max: this.tempFilter.min ? Number(this.tempFilter.min) * 100 : '',
            }
            : null;
    }

    //   点击一级分类
    public onClickfirst_category_id(category: IdName){
        this.tempFilter.first_category_id = String(category.id);
        this.tempFilter.first_category_name = category.name;

        this.tempFilter.SpecName = '';
        // 获取一级分类下的规格
        this.getFirstCategorySpec();
    }


    
    /**
     * 点击类别  规格
     */
    public onClickCategory(category: IdName) {
        this.tempFilter.SpecName = category.name;
    }

    /** 二级类别信息 */
    public get categoryList() {
        const list = store.state.shop.category[this.category] || [];
        const result: IdName[][] = [];
        for (let i = 0, len = list.length; i < len; i = i + 3) {
            const row: IdName[] = [];
            if (list[i]) {
                row.push(list[i]);
            }
            if (list[i + 1]) {
                row.push(list[i + 1]);
            }
            if (list[i + 2]) {
                row.push(list[i + 2]);
            }
            result.push(row);
        }
        return result;
    }
    /** 品牌列表 */
    public get brand() {
        let list = [];
        if(this.search){
            list = store.state.good.brand[this.getparentType] || [];
        }else{
            list = store.state.good.brand[this.category] || [];
        }
        // const list = store.state.good.brand[this.category] || [];
        // const result: IdName[][] = [];
        // for (let i = 0, len = list.length; i < len; i = i + 3) {
        //     const row: IdName[] = [];
        //     if (list[i]) {
        //         row.push(list[i]);
        //     }
        //     if (list[i + 1]) {
        //         row.push(list[i + 1]);
        //     }
        //     if (list[i + 2]) {
        //         row.push(list[i + 2]);
        //     }
        //     result.push(row);
        // }
        // return result;
        return list;

    }
    /**
     * 点击品牌
     */
    public onClickBrand(brand: IdName) {
        this.tempFilter.brand = brand.name;
    }
    /** 商品列表 */
    public get productList() {
        const key = `${this.tempFilter.brand}_${this.shopId}_${this.category}_${this.tempFilter.SpecName}_${this.sortValue}_${JSON.stringify(this.screen)}_${this.search}`;
        const wrap = store.state.good.productList;
        return wrap[key] || {
            list: [],
            loaded: false,
            req: false,
        };
    }
    /** 商品列表 */
    public get list() {
        const map = store.state.good.productMap;
        return this.productList.list.map((id) => map[id]);
    }

    @WatchDelay('search', 500)
    @Watch('search')
    public onSearch() {
        var that = this;
        // this.category = this.search?this.getparentType:this.category;
        that.getProductList(true,true);
        // 搜索关键字更改品牌分类
        // this.getBrandList()
        setTimeout(function(){
            that.getBrandList()
            that.TopAllCategory();
        },500)

    }

    // 打开左侧菜单
    public openSlideMenu(item){
            if (item.to) {
                // api.push(Object.assign({}, item.to));
                if(item.to.query.type == '全部商品'){
                    this.category = '';
                    this.tempFilter = {
                        min: '',
                        max: '',
                        first_category_id:'',
                        first_category_name: '',
                        SpecName: '',
                        brand: null,
                    };
                    this.search = '';
                    this.sortValue = '';
                    this.sortName = '';

                }else{
                    this.category = item.to.query.type;
                    this.category_id = item.to.query.category_id;
                    this.tempFilter = {
                        min: '',
                        max: '',
                        first_category_id:'',
                        first_category_name: '',
                        SpecName: '',
                        brand: null,
                    };
                    this.search = '';
                    this.sortValue = '';
                    this.sortName = '';
                }
                this.getProductList(true,true);
                this.getBrandList();
                this.TopAllCategory();

            }
            if(item.openSlide){
                this.$emit('openSlideMenu', item.openSlide);
                this.change()
            }
    }
    // 重置
    public onClickSelectReset() {
        // this.tempFilter.min = '';
        // this.tempFilter.max = '';
        this.tempFilter = {
            min: '',
            max: '',
            first_category_id:'',
            first_category_name: '',
            SpecName: '',
            brand: null,
        };
        this.search = '';
        this.sortValue = '';
        this.sortName = '';
        this.category_id = '';
    }

    /**
     * 更新排序
     */
    public onChangeSort(sort: any) {
        this.sortValue = sort.val;
        this.sortName = sort.name;
        this.getProductList(false,false);
    }

    /**
     * 更新价格范围
     */
    public onChangeRange(range: any) {
        // this.min = range.min;
        // this.max = range.max;
        this.getProductList(true,true);
        this.showFilter = false;
    }

    /**
     * 点击商品
     */
    public onClickProduct(product: Product.ListItem) {
        // if (product.type === 'package') {
        //     api.navigateTo({
        //         url: '/pages/pkg_detail/main',
        //         query: {
        //             pkg_id: product.id,
        //         },
        //     });
        // } else if (product.type === 'good') {
        //     api.navigateTo({
        //         url: '/pages/product_detail/main',
        //         query: {
        //             product_id: product.id,
        //         },
        //     });
        // }
        // api.navigateTo({
        //     url: '/pages/product_detail/main',
        //     query: {
        //         product_id: product.id,
        //     },
        // });
        api.push({
            name: ROUTE_NAME.PRODUCT_DETAIL,
            params: {
                productId: product.id + '',
            },
        });
    }
    /**
     * 获取商品列表      brand: this.filter.brand,品牌 
     */
    public getProductList(forceUpdate = false,switchState) {
        return store.dispatch('good/getProductList', {
            brand: this.tempFilter.brand,
            shopId: this.shopId,
            // category: this.search?this.getparentType:this.category,
            category: this.category,
            // categoryId: this.tempFilter.SpecName,//this.category,
            SpecName: this.tempFilter.SpecName,
            offset: switchState?0:this.list.length,
            count: 10,
            sort: this.sortValue,
            screen: this.screen,
            name: this.search,
            forceUpdate,
        });
    }
    //获取品牌列表
    public getBrandList(){
        return store.dispatch('good/getBrand', {
            parent: this.search?this.getparentType:(this.category?this.category:'')
            // parent: this.category?this.category:''
        });
    } 

    // 获取顶级下的一级分类、二级分类和品牌
    public TopAllCategory(){
        return store.dispatch('good/getTopAllCategory', {
            top_category_id: this.search?(this.getTopCategoryid?this.getTopCategoryid:this.category_id):this.category_id
        });
    }
    // 获取一级分类下的规格
    public getFirstCategorySpec(){
        return store.dispatch('good/getFirstCategorySpec', {
            top_category_id: this.search?(this.getTopCategoryid?this.getTopCategoryid:this.category_id):this.category_id,
            first_category_id: this.tempFilter.first_category_id
        });
    }


    public onReachBottom() {
        this.getProductList(false,false);
        this.getBrandList();
    }

    public async beforeRouteEnter(to: Route, from: Route, next: any) {
        store.commit('utils/startRequest');
        await Promise.all([
            store.dispatch('shop/getIndexBanners'),
            store.dispatch('shop/getCart', {}),
            store.dispatch('utils/getPageConfig'),
            store.dispatch('good/getProductList', {
                offset: 0,
                count: 10,
                sort: '',
                screen: {
                    min: '',
                    max: '',
                },
                name: '',
                category:''
            }),

            store.dispatch('good/getSliderList',{
                pid:0,
                is_view_show:1
            }),
        ]);
        // 获取品牌
        store.dispatch('good/getBrand', {
            parent: '',
        });

        store.commit('utils/endRequest');
        next();
    }
    public created() {
        window.addEventListener('reachbottom', this.onReachBottom);
        window.onShareAppMessage = (res) => {
            // return {
            //     title: '商城',
            //     imageUrl: '',
            //     path: `/pages/mall/main?referrer_id=${this.userBasicInfo.id}`,
            // };

            const url = this.$router.resolve({
                name: ROUTE_NAME.MALL_INDEX,
                query: {
                    referrer: this.userBasicInfo.id + '',
                },
            }).route.fullPath;

            return {
                title: '商城',
                imageUrl: '',
                // path: `/pages/index/main?referrer_id=${this.userBasicInfo.id}`,
                miniprogramPath: `/pages/main/index?type=share&targeturl=${encodeURIComponent(url)}`, // 如果需要分享原始小程序页面路由，可传递此参数
            };
        }
    }
    public beforeDestroy() {
        window.removeEventListener('reachbottom', this.onReachBottom);
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";
@import "../../lib/style/features/line.less";

.paddingBottom{
    padding-bottom: 200rpx!important;
}
.feaceBox{
    position: fixed;
    top: 0;
    left:0;
    width:100%;
    height:92%;
    background-color: rgba(0, 0, 0, 0.40);
    z-index: 9;
}
.boxSize{
    width:100%;
    height: 100%;
}
.feace_ul{
    position: absolute;
    top:0;
    left:0;
    width:230rpx;
    height: 95%;
    background-color: #ffffff;
    padding: 30rpx 40rpx;
    padding-right: 20rpx;
    overflow: hidden;
    overflow-y: scroll
}
.feace_title{
    width:90%;
    font-size: 20px;
    border-bottom: 1px solid #feaaaf;
    margin-bottom: 30px;
}
.face_li_box{
    overflow: hidden;
    overflow-y: scroll;
}
.face_li{
    padding:10px 0px;
}
.select_active{
    color: #feaaaf;
    border-bottom: 1px solid #feaaaf;
}
.face_li_con{
    border-bottom: 1px solid #F2F2F2;
    padding-bottom: 10px
}
.face_li_img{
    width:11px;
    margin: 12rpx 0rpx 0rpx 20rpx;
}




.box_flex{
    display: flex;
}

.mall-index {
    padding-bottom: @height-tabbar;

    .tabbox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 5px 14px;
        // margin-top: -10px;
        .tabbox_item{
            width: 20%;
            margin-bottom: 10rpx;
        }
        .tabbox_item_img{
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            margin: 15rpx auto;
        }
        .tabbox_item_title{
            width: 100%;
            text-align: center;
            font-size: 24rpx;
        }
        .bg-pink {
            background-color: #FFEDED;
            .icon {
                color: #fababd;
            }
        }
        .bg-blue {
            background-color: #E7F3FF;
            .icon {
                color: #9ec6fa;
            }
        }
    }

    .hot-recommend {
        padding: 10px 25px;
        .content {
            margin-right: -10px;
            .item {
                width: 156px;
                height: 88px;
                margin-top: 10px;
                margin-right: 10px;
                box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
                border-radius: 10px;
                overflow: hidden;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;
                }
            }
        }
    }

    .select-wrap {
        padding-top: 36rpx;
    }

    .goods-box {
        padding: 0 18px 10px;
        .good {
            margin-right: -13px;
        }
    }

    &__empty {
        padding: 100px 0;
        .text-normal();
        color: @color-font-3;
        text-align: center;
    }
}

</style>
